iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
2
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 20

第二十步 - 欺騙的幻覺背景(CSS 背景)

  • 分享至 

  • xImage
  •  

星期六假日,我是喵橘,先開心去看電影...咦?晚點再講解 CSS 背景部分。

https://ithelp.ithome.com.tw/upload/images/20190921/20117282IgrB7nBHSK.png

CSS 背景

背景色彩設定

網頁除了文字的變化,也別忘記背景也能做設計,顏色調整得宜就能吸引使用瀏覽。

CSS

p { 
    color: #FFF;
    background-color: #0F0;
}

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190920/201172827wV04bYSxD.png

背景圖片嵌入

也可以自己繪製相關圖片,配合公司的理念做出具有質感的背景。

CSS

body { background-image: url(sky.jpeg); }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/20117282mIEbnwOQuK.png

背景圖片重複技巧

運用背景重複的技巧,可以不用匯入大張的圖片,用小張圖案重複動作,形成一個具有美感的背景。

CSS

body { background-image: url(love.png); background-repeat: repeat-x; }
p{ color: orange; }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/20117282nO69Fh3vLY.png

背景圖片固定方法

是否要固定背景是否跟著你的移動而進行動作,可以思考自己的網頁特性,來添加此功能。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: repeat-x; 
    background-attachment: fixed;
    height: 1000px;
}
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/20117282PP3wtBpblz.png

背景位置設定

設計的圖片可以放置自己想要的位置,不一定要繪製整張背景圖。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: no-repeat; 
    background-position: 600px 30px;
    }
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/201172822MFNmQ5FPT.png

範例圖示:

背景大小設定

假如圖片太大或太小,可以運用此功能來調整。

CSS

body { 
    background-image: url(love.png); 
    background-repeat: no-repeat; 
    background-position: 600px 30px;
    background-size: 30% auto; 
    }
p{ color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/20117282WjDysmDOqA.png

背景快速設定

假如熟悉 CSS 語法,就是要優化程式碼,這一個方法是最推薦也是對網頁執行效率最好的方法。

CSS

body { 
        /* background: 背景顏色 背景圖片 背景重複方式 背景位置 背景是否固定*/
        background: #fff url(love.png) no-repeat top center;
    }
p { color: orange; text-align: center; }

HTML

<p>我是喵橘</p>

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20190921/20117282DTrHsJFdzu.png

明天預告

今天是講解 CSS 背景設定,有許多不清楚的部分,往後會找時間補充與改進,明天開始講解 CSS 邊框部分,謝謝大家的閱讀。


上一篇
第十九步 - 加上色彩吧,破解的關鍵(CSS 顏色與字型設定)
下一篇
第二十一步 - 秘密的邊框轉換(框線設計語法)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言